import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input, Space, notification, Typography, Select, Spin } from "antd";
// http
import http from '../../../utils/request';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
import {CopyToClipboard} from 'react-copy-to-clipboard';

const { Text, Link } = Typography;
const { Option } = Select;


class Logs extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.instance_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.instance_id}</span></span>
                                </CopyToClipboard>
                                 
                                <Text >{rowData.name}</Text>
                            </Space>
                        )
                    }
                },
                {title: "用户", dataIndex: "user_id", key: "user_id"},
                {title: "时间", dataIndex: "create_time", key: "create_time"},
                {title: "动作", dataIndex: "action", key: "action"},
                {title: "任务状态", dataIndex: "status", key: "status",
                    render: (text, rowData) => {
                        var status_text = null
                        if (rowData.status === 'success') {
                            status_text = <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/success1.png" alt="logo" style={{ height: '24px'}}/>
                        } else if (rowData.status === 'failed') {
                            status_text = <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/failed1.png" alt="logo" style={{ height: '24px'}}/>
                        } else if (rowData.status === 'loading') {
                            status_text = <Spin />
                        }
                        return(
                            <div>{status_text}</div>
                        )
                    }
                },
                {title: "资源", dataIndex: "resource", key: "resource"},
                {title: "明细", dataIndex: "detail", key: "detail",
                    render: (text, rowData) => {
                        var detail_text = null
                        if (rowData.action === '导出' & rowData.status === 'success') {
                            detail_text = <Link target="_blank" href={rowData.detail}>下载</Link>
                        } else {
                            detail_text = rowData.detail
                        }
                        // var status_text = null
                        // if (rowData.status === 'success') {
                        //     status_text = <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/success1.png" alt="logo" style={{ height: '24px'}}/>
                        // } else if (rowData.status === 'failed') {
                        //     status_text = <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/failed1.png" alt="logo" style={{ height: '24px'}}/>
                        // } else if (rowData.status === 'loading') {
                        //     status_text = <Spin />
                        // }
                        return(
                            <div>{detail_text}</div>
                        )
                    }
                }
            ],
            loading: false,
            search_user_id: '',
            search_instance_id: '',
            search_action: '',
            search_resource: '',
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'user_id__contains': this.state.search_user_id,
            'instance_id__contains': this.state.search_instance_id,
            'action__contains': this.state.search_action,
            'resource__contains': this.state.search_resource
        }

        // 获取分组列表
        http.get('/cloud/kubernetes_log', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_user_id: data.user_id ? data.user_id : null,
            search_instance_id: data.instance_id ? data.instance_id: null,
            search_action: data.action ? data.action : null,
            search_resource: data.resource ? data.resource : null
        })
        this.loadData()
    }

    render(){
        const { loading, dataSource, columns, page, total } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="实例ID" name="instance_id">
                        <Input placeholder="请输入集群实例ID"  />
                    </Form.Item>

                    <Form.Item label="用户ID" name="user_id">
                        <Input placeholder="yuehua.wl"  />
                    </Form.Item>

                    <Form.Item label="动作" name="action" size="small">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择动作类型"
                            >
                            <Option key="新增">新增</Option>
                            <Option key="更新">更新</Option>
                            <Option key="删除">删除</Option>
                            <Option key="导出">导出</Option>
                        </Select>                      
                    </Form.Item>


                    <Form.Item label="资源" name="resource" size="small">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择动作类型"
                            >
                            <Option key="node">Node</Option>
                            <Option key="pod">Pod</Option>
                        </Select>                      
                    </Form.Item>


                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}></div>
                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}
export default Logs;